<template>
    <div class="box">
      <el-card>
        <template #header>
          <h3>店铺审核</h3>
        </template>
        <!-- 搜索区域 -->
        <el-form inline :model="shopData">
          <el-form-item label="店铺名称">
            <el-input v-model="shopData.shopName"></el-input>
          </el-form-item>
          <el-form-item label="店铺状态">
            <el-select v-model="shopData.status" style="width: 200px">
              <el-option label="未审核" value="0"></el-option>
              <el-option label="已审核" value="1"></el-option>
              <el-option label="营业" value="2"></el-option>
              <el-option label="歇业" value="3"></el-option>
              <el-option label="违规" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="loadShopList">搜索</el-button>
          </el-form-item>
        </el-form>
        <!-- 数据区域 -->
        <el-table :data="tableData" border>
          <el-table-column type="expand">
            <template #default="props">
              <el-descriptions :column="3" border>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">店铺名称</div>
                  </template>
                  {{ props.row.shopName }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">店铺地址</div>
                  </template>
                  {{ props.row.shopAddress }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">店铺图片</div>
                  </template>
                  <img :src="props.row.shopImg" alt="" width="150" />
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">店铺介绍</div>
                  </template>
                  {{ props.row.shopExplain }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">店铺分类</div>
                  </template>
                  {{ props.row.shopCategoryId }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">配送费</div>
                  </template>
                  {{ props.row.deliveryPrice }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">起送费</div>
                  </template>
                  {{ props.row.startPrice }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">店铺状态</div>
                  </template>
                  <el-tag v-if="props.row.status == 0" type="danger">
                    未审核
                  </el-tag>
                  <el-tag v-else-if="props.row.status == 1" type="success">
                    已审核
                  </el-tag>
                  <el-tag v-else-if="props.row.status == 2" type="primary">
                    营业
                  </el-tag>
                  <el-tag v-else-if="props.row.status == 3" type="info">
                    歇业
                  </el-tag>
                  <el-tag v-else-if="props.row.status == 4" type="warning">
                    违规
                  </el-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">营业时间</div>
                  </template>
                  {{ props.row.startTime }} - {{ props.row.endTime }}
                </el-descriptions-item>
              </el-descriptions>
            </template>
          </el-table-column>
          <el-table-column prop="shopName" label="店铺名称"></el-table-column>
          <el-table-column prop="shopAddress" label="店铺地址"></el-table-column>
          <el-table-column prop="shopExplain" label="店铺介绍"></el-table-column>
          <el-table-column
            prop="startPrice"
            label="起送费"
            width="80"
          ></el-table-column>
          <el-table-column
            prop="deliveryPrice"
            label="配送费"
            width="80"
          ></el-table-column>
          <el-table-column label="营业时间" width="240">
            <template #default="scope">
              {{ scope.row.startTime }} - {{ scope.row.endTime }}
            </template>
          </el-table-column>
          <el-table-column prop="status" label="店铺状态" width="100">
            <template #default="scope">
              <el-tag v-if="scope.row.status == 0" type="danger">未审核</el-tag>
              <el-tag v-else-if="scope.row.status == 1" type="success">
                已审核
              </el-tag>
              <el-tag v-else-if="scope.row.status == 2" type="primary">
                营业
              </el-tag>
              <el-tag v-else-if="scope.row.status == 3" type="info">歇业</el-tag>
              <el-tag v-else-if="scope.row.status == 4" type="warning">
                违规
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button
                type="success"
                @click="handleAudit(scope.row)"
                size="small"
                v-if="scope.row.status == 0"
              >
                审核
              </el-button>
              <el-button
                type="primary"
                @click="handleEdit(scope.row)"
                size="small"
                v-else-if="scope.row.status == 1"
              >
                退审
              </el-button>
              <el-button
                type="danger"
                @click="handleFoul(scope.row)"
                size="small"
                v-else-if="scope.row.status == 2"
              >
                违规停业
              </el-button>
              <el-button
                type="danger"
                size="small"
                v-else-if="scope.row.status == 4"
              >
                通知商家整改
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <template #footer>
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[2, 3, 5, 10]"
            layout="total, sizes,  prev, pager, next"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </template>
      </el-card>
    </div>
  </template>
  
  <script>
  import { shopAuditListAPI, shopAuditAPI } from "@/api/shop.js";
  import dayjs from "dayjs";
  export default {
    data() {
      return {
        // 搜索对应的数据
        shopData: {},
        // 分页的参数:
        currentPage: 1,
        pageSize: 10,
        total: 0,
        // 表格数据
        tableData: [],
      };
    },
    methods: {
      handleSizeChange() {
        this.loadShopList();
      },
      handleCurrentChange() {
        this.loadShopList();
      },
      loadShopList() {
        shopAuditListAPI({
          ...this.shopData,
          currentPage: this.currentPage,
          pageSize: this.pageSize,
        }).then((resp) => {
          this.total = resp.data.total;
          this.tableData = resp.data.datas;
        });
      },
      // 点击审核按钮
      handleAudit(row) {
        shopAuditAPI({
          shopId: row.shopId,
          status: 1,
        }).then((resp) => {
          if (resp.data == 1) {
            this.loadShopList();
          }
        });
      },
      // 点击退审按钮
      handleEdit(row) {
        shopAuditAPI({
          shopId: row.shopId,
          status: 0,
        }).then((resp) => {
          if (resp.data == 1) {
            this.loadShopList();
          }
        });
      },
      // 点击违规停业按钮
      handleFoul(row) {
        shopAuditAPI({
          shopId: row.shopId,
          status: 4,
        }).then((resp) => {
          if (resp.data == 1) {
            this.loadShopList();
          }
        });
      },
  
      // 格式化数据的方法
      formatDate(a) {
        return dayjs(a).format("HH:mm:ss");
      },
    },
    created() {
      this.loadShopList();
    },
  };
  </script>
  
  <style scoped>
  
  </style>
  